import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import {Link} from 'react-router';
import  Topics  from './topics';
import  Siderbar  from './siderbar';
import  ReactMarkdown from 'react-markdown';
import '../assets/styles/home.css'
import Node from './nodeItem';
import {Grid, Row, Col, Modal, Button, Panel} from 'react-bootstrap';
import Font from 'react-fontawesome';

class Home extends Component {
  static propTypes = {
    pathname: PropTypes.string.isRequired,
    nodes: PropTypes.array.isRequired,
  }
  constructor(props) {
    super(props);
    this.state = {
      current: this.props.pathname,
      nodes: this.props.nodes,
      node: {},
      visible: false,
      node_id: Number(this.props.node_id),
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({
      visible: !this.state.visible,
    });
  }
  componentDidMount() {
    const {pathname, node_id, nodes} = this.props;
    let node;
    if (Number(node_id) > 0) {
      node = nodes.find(item => item.id === Number(node_id))
    }
    if (pathname === '/jobs') {
      node = nodes.find(item => item.id === 25)
    }
    if (pathname === '/homeland') {
      node = nodes.find(item => item.id === 23)
    }
    this.setState({
      current: pathname,
      nodes: nodes,
      node: node,
      node_id: Number(node_id),
      visible: false,
    });
    
  }

  componentWillReceiveProps(nextProps) {
    if ((nextProps.nodes.length > 0 && nextProps.nodes.length !== this.state.nodes.length) || nextProps.pathname !== this.state.current || Number(nextProps.node_id) !== this.state.node_id) {
      const {pathname, node_id, nodes} = nextProps;
      let node;
      if (Number(node_id) > 0) {
        node = nodes.find(item => item.id === Number(node_id))
      }
      if (pathname === '/jobs') {
        node = nodes.find(item => item.id === 25)
      }
      if (pathname === '/homeland') {
        node = nodes.find(item => item.id === 23)
      }
      this.setState({
        nodes: nextProps.nodes,
        node: node,
        node_id: Number(Number(node_id)),
      });
      if (nextProps.pathname !== this.state.current || Number(node_id) !== this.state.node_id) {
        this.setState({
          current: nextProps.pathname,
          visible: false,
        })
      }
    }
    
  }
  
  render() {

    //let nodes = this.state.nodes.group(item => item.section_name);
    return (
      <div>
      {/*{header}*/}
      <Grid>
      {/*<Modal show={this.state.visible} bsSize="large" onHide={this.handleClick}>*/}
        {/*<Modal.Header closeButton><Modal.Title id="contained-modal-title-lg">选择话题节点</Modal.Title></Modal.Header>*/}
        {/*<Modal.Body>*/}
        {/*{nodes.map((node, i) =>*/}
          {/*<Node key={i} node={node} />*/}
        {/*)}*/}
        {/*</Modal.Body>*/}
        {/**/}
      {/*</Modal>*/}
      {/*左右侧边栏*/}
      <Row>
        <Col md={10}>
        <Panel>
          <Topics />
        </Panel>
        </Col>
        <Col md={2}>

          <Siderbar />
          <Siderbar />
        </Col>
        <div className="clear"></div>
      </Row>
      </Grid>
      </div>

    )
  }
}

const mapStateToProps = (state, props) => {
  let {pathname, query, hash} = state.routing.locationBeforeTransitions;
  let node_id = query.node_id || 0
  if (hash.indexOf('#') > -1) {
    pathname = hash.slice(1).split('?')[0];
    node_id = hash.indexOf('node_id=') > -1 ? hash.split('node_id=')[1].split('&')[0] : node_id
  }
  const {nodesFetchState} = state
  
  const {
    items:nodes,
  } = nodesFetchState['nodes'] || {
    items: []
  }
  return {
    pathname,
    nodes,
    node_id,
  }
}

const mapDispatchToProps = (dispatch, props) => {
  return {
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(Home);
